<template>
  <div class="transfer_module_container">
    <a-tabs v-if="transferJobList.length" v-model="activeId" @change="changeTabs">
      <template slot="tabBarExtraContent">
        <a-button @click="toAddTransfer" :loading="loading">{{
          $t("添加转换")
        }}</a-button>
      </template>
      <template v-for="(item, i) in transferJobList">
        <a-tab-pane :key="item.id">
          <span slot="tab">
            {{ item.jobName || $t("未设置") }}
            <a-icon
              type="close"
              class="btn_close"
              @click="toDelTransfer(i)"
              v-if="i != 0"
            />
          </span>

          <div class="transfer_module">
            <div class="base_info">
              <div class="one">
                <span>{{ $t("转换名称") }}：</span>
                <a-input v-model="item.jobName" placeholder="请输入转换名称"></a-input>
              </div>
              <div class="one">
                <span>{{ $t("转换类型") }}：</span>
                <a-radio-group
                  button-style="solid"
                  v-model="item.mappingType"
                  @change="changeType(item)"
                >
                  <a-radio-button value="join">{{ $t("表关系映射") }}</a-radio-button>
                  <a-radio-button value="sql">{{ $t("SQL脚本映射") }}</a-radio-button>
                </a-radio-group>
              </div>
              <div class="one" v-if="item.mappingType == 'sql'">
                <span>{{ $t("临时表名") }}：</span>
                <a-input
                  placeholder="请输入临时表名"
                  v-model="sqlTable.data.tableName"
                ></a-input>
              </div>
            </div>
            <!-- 表关系 -->
            <setTableJoin
              v-show="item.mappingType == 'join'"
              :tableCells="tableCells"
              :joinTable="joinTable"
              @change="changeTable"
            ></setTableJoin>

            <!-- SQL脚本 -->
            <setSqlJoin
              v-show="item.mappingType == 'sql'"
              :sqlTable="sqlTable"
              @change="changeSql('auto')"
            ></setSqlJoin>

            <!-- 映射设置 -->
            <setTableMapping
              :ref="`tableMapping_${activeId}`"
              :tableColumns="tableColumns"
              :sourceColumns="sourceColumns"
              :outputTable="outputTable"
              @changeIncField="changeIncField"
            ></setTableMapping>
          </div>
        </a-tab-pane>
      </template>
    </a-tabs>
    <!-- 作业调试 -->
    <jobDebug :show.sync="debugInfo.show" :info="debugInfo.info"></jobDebug>
  </div>
</template>

<script type="text/javascript" src="./service.js"></script>
<style lang="less" scoped>
.transfer_module_container {
  height: calc(100% - 12px);
  background: #fff;
  /deep/.ant-tabs {
    height: 100%;
    color: #000;
    .ant-tabs-bar {
      background: #eff2fd;
      border: 0 none;
      display: block !important;
    }
    .ant-tabs-tab {
      border-radius: 4px 4px 0 0;
      padding: 10px 16px;
      background: #d9d9d9;
      .btn_close {
        font-size: 12px;
      }
    }
    .ant-tabs-tab-active {
      color: #000;
      background: #fff;
    }
    .ant-tabs-ink-bar {
      display: none !important;
    }
    .ant-tabs-content {
      height: calc(100% - 56px);
    }
  }
  .transfer_module {
    height: 100%;
    padding: 0 12px;
  }
  .base_info {
    display: flex;
    padding: 0 4px;
    .one {
      margin-right: 24px;
    }
    span {
      display: inline-block;
      text-align: right;
    }
    .ant-input {
      width: 160px;
    }
  }
}
</style>
